<template>
  <div class="" style="min-height:100%;background-color:#f2f2f2">
    <div class="changgeTop topunide">
      <div class="bg_w f13 ub  padding-css3">
        <div class="daysdiv ub ub-ac preDay" @click="changeDate(1)">
          <img class="img1 ub ub-ac " alt="" src="./arrow_left@2x.png">
          <div class="ub ub-ac ub-ver">
            <div>前一天</div>
            <div class="DateMoney">{{beforflight}}</div>
          </div>
        </div>
        <div class="daysdiv2 fontWei ub-f1 ub ub-ac ub-pc">
          <div class="ub ub-ac ub-ver">
            <div class="">
              <span id="nowDate">{{today}}</span>
            </div>
            <div class="DateMoney">{{flightPri}}</div>
          </div>
        </div>
        <div class="daysdiv ub ub-ac ub-pe lastDay" @click="changeDate(2)">
          <div class="ub ub-ac ub-ver">
            <div>后一天</div>
            <div class="DateMoney">{{afterflight}}</div>
          </div>
          <img class="img1 ub ub-ac " alt="" src="./arrow_right@2x.png">
        </div>
      </div>
    </div>
    <div class="changges padding-css3 margin-t-css5" :key="index" v-for="(item,index) in flightList">
      <div class="ub-fh ticketTitle margin-css2" @click="item.isShow=!item.isShow">
        <div class="bg_w padding-css2 ub ub-ver">
          <div class="ub padding-css3 f14">
            <div class="ub ub-f1 ub-ac"><img class="img012" :src="item.airCompanyIcon">
              <span>{{item.flightNum}}</span>
            </div>
            <div class="ub ub-ac moneyColor">￥{{item.ta1[0].price}}起</div>
          </div>
          <div class="ub division">
            <div class="round roundLeft"></div>
            <div class="web-width divisionDashed ub-f1"></div>
            <div class="round roundRight"></div>
          </div>
          <div class="ub ub-ver padding-css3">
            <div class="ub ub-fh ub-ac">
              <div class="ub-f1 ub f16 fontWei">
                <span>{{item.beginDateTime.substr(0,5)}}</span>
              </div>
              <div class="ub ub-ver ub-pc ub-ac" style="color:#843d99;font-size:90%;">
                <div v-show="item.stopOverFlag">经停</div>
                <img class="img2 ub ub-ac" src="./flyto.png">
              </div>

              <div class="ub-f1 ub ub-pe f16  fontWei">
                <span>{{item.endDateTime.substr(0,5)}}</span>
              </div>
            </div>
            <div class="ub ub-fh ub-ac zt-999 mart05">
              <div class="ub-f1 ub f12 ">
                <span>{{item.beginCityName[1]}}</span>
              </div>
              <div class="ub-f1 ub ub-pe f12 ">
                <span>{{item.endCityName[1]}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ticketContent" v-show="item.isShow">
        <div :key="index1" v-for="(tic,index1) in item.ta1" @click="airTicketOrder(tic,item.airCompanyId)" class="bg_w padding-css7 margin-css3 ub ub-ver border-radiuscss1">
          <div class="ub padding-css3">
            <div class="ub ub-f1">
              <div class="ub ub-ac f16 fontWei">
                <span>{{tic.priceName}}</span>
              </div>
              <div class="ub ub-ac f12 margin-l-css2 context" @click.stop="openrule(tic.rule)">
                <span class="zt-999">退改签规则</span><img class="margin-l-css2 ub ub-ac img3" src="./list_info.png"></div>
            </div>
            <div class="moneyColor f18">
              <span>￥{{tic.price}}</span>
            </div>
          </div>
          <div class="ub">
            <div class="padding-css2" style="width:60%">
              <div class="ub ub-f1 ub-ac f12 rule" :key="index2" v-for="(tag,index2) in tic.tags">
                <img class="img1 ub ub-ac" :src="tag.icon">
                <span class="margin-l-css2">{{tag.text}}</span>
              </div>
            </div>
            <div class="padding-css2">
              <div class="f12" style="margin-top:0.3rem">
                <span>余票：{{tic.seat}}</span>
              </div>
              <div class="btn-yd bg-moneyColor f16 ub ub-ac ub-pc reserveBtn" data-uri="5a0106750e4c7d55e5aa2ef1" data-index="1">
                <span>预订</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="uinn pop1" v-show="isPop">
      <div class="closeIcon ub-img" @click="closePop"></div>
      <div class="bg_w popdata" v-html="popData"></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    try {
      let self = this;
      console.log(self.flights.searchOpt)
      self.$store.commit('changeHeader', { // 提交首页header
        left: '返回',
        right: '',
        middle: self.flights.searchOpt.beginCityName + '-' + self.flights.searchOpt.endCityName,
        ifshow: true,
        leftAction: '-1',
        leftIcon: 'leftIcon',
        rightAction: '/home',
        rightIcon: 'homeIcon'
      });
      self.nowDate = new Date(self.flights.searchOpt.beginDate);
      self.today = self.flights.searchOpt.beginDate;
      this.getData();
    } catch (err) {
      alert(err)
    }
  },
  data: function () {
    return {
      today: '',
      nowDate: '',
      isPop: false,
      popData: '',
      flightData: {},
      beforflight: '', // 前一天价格
      afterflight: '', // 后一天价格
      flightPri: '', // 今天价格
      flightList: [], // 今天机票
      PiDomOrInt: '1'
    }
  },
  components: {
  },
  methods: {
    airTicketOrder: function (tic, airCompanyId) {
      let content = this.flights.searchOpt;
      let self = this;
      content.tic = tic; // 重新存储时间
      content.tic.airCompanyId = airCompanyId;
      content.PiDomOrInt = self.PiDomOrInt;
      this.$store.commit('setSearchOpt', content); // 重新存储时间
      console.log(this.flights);
      if (!this.loginData.isLogin) {
        // console.log()
        let content = {
          text: '请登录',
          callback: function () {
            self.$router.push('/login');
          }
        }
        self.$store.dispatch('showTx', content);
        return false;
      }
      this.$store.commit('setIsAirTicketOrder', false)
      this.$store.commit('setIfInit', false);
      this.$router.push('/airTicketOrder')
    },
    getData: function () {
      let self = this;
      self.flightPri = '...';
      self.afterflight = '';
      self.beforflight = '';
      self.flightList = [];
      if (self.flights.searchOpt.endCity === 'SIN' || self.flights.searchOpt.beginCity === 'SIN') {
        self.PiDomOrInt = '2'
      } else {
        self.PiDomOrInt = '1'
      }
      let content = {
        'adt': self.flights.searchOpt.adt,
        'inf': self.flights.searchOpt.inf,
        'beginDate': self.today,
        'beginCity': self.flights.searchOpt.beginCity,
        'cnn': self.flights.searchOpt.cnn,
        'backDate': self.flights.searchOpt.backDate,
        'type': self.flights.searchOpt.type,
        'endCity': self.flights.searchOpt.endCity
      }
      console.log(content)
      // let userInfo = this.loginData.userInfo;
      console.log(this.loginData)
      // let userId = userInfo.userId;
      // let loginToken = userInfo.token.loginToken;
      let data = this.$utils.getUserContent(content);
      // data.headers.userId = userId;
      // data.headers.loginToken = loginToken;
      self.$store.commit('showLoading');
      self.$http.post(self.$RS.flightList, data).then(
        function (res) {
          // 响应成功回调
          self.$store.commit('closePop');
          res = res.body;
          console.log(res);
          if (res.code === 1000) {
            let list = res.content['' + self.today + ''];
            if (list) {
              for (let i = 0; i < list.length; i++) {
                list[i].isShow = false;
              }
            }
            self.flightList = list;
            let beforDate = new Date(new Date((self.nowDate.getFullYear()) + '/' + (self.nowDate.getMonth() + 1) + '/' + self.nowDate.getDate()).getTime() - 1000 * 24 * 3600 * 1);
            let afterDate = new Date(new Date((self.nowDate.getFullYear()) + '/' + (self.nowDate.getMonth() + 1) + '/' + self.nowDate.getDate()).getTime() + 1000 * 24 * 3600 * 1);
            let befor = beforDate.getFullYear() + '-' + ((beforDate.getMonth() + 1) < 10 ? '0' + (beforDate.getMonth() + 1) : (beforDate.getMonth() + 1)) + '-' + (beforDate.getDate() < 10 ? '0' + beforDate.getDate() : beforDate.getDate())
            let after = afterDate.getFullYear() + '-' + ((afterDate.getMonth() + 1) < 10 ? '0' + (afterDate.getMonth() + 1) : (afterDate.getMonth() + 1)) + '-' + (afterDate.getDate() < 10 ? '0' + afterDate.getDate() : afterDate.getDate())
            let beforflightList = res.content['' + befor + ''];
            let afterflightList = res.content['' + after + ''];
            if (self.flightList) {
              self.flightPri = '￥' + self.getPri(self.flightList) + '起';
            } else {
              self.flightPri = '暂无航班'
            }
            if (beforflightList) {
              self.beforflight = '￥' + self.getPri(beforflightList) + '起';
            } else {
              self.beforflight = '暂无航班'
            }
            if (afterflightList) {
              self.afterflight = '￥' + self.getPri(afterflightList) + '起'
            } else {
              self.afterflight = '暂无航班'
            }
          } else {
            self.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
          }
        },
        function (err) {
          // 响应错误回调
          this.$store.commit('closePop');
          self.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    closePop: function () {
      this.isPop = !this.isPop;
      this.popData = '';
    },
    openrule: function (data) {
      this.isPop = !this.isPop;
      this.popData = data;
    },
    getPri: function (list) {
      let pri = Number(list[0].ta1[0].price);
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < list[i].ta1.length; j++) {
          if (Number(pri) > Number(list[i].ta1[j].price)) {
            pri = Number(list[i].ta1[j].price);
          }
        }
      }
      return pri;
    },
    changeDate: function (type) {
      let self = this;
      if (type === 1) { // 前一天
        this.nowDate = new Date(new Date((this.nowDate.getFullYear()) + '/' + (this.nowDate.getMonth() + 1) + '/' + this.nowDate.getDate()).getTime() - 1000 * 24 * 3600 * 1);
        self.today = this.nowDate.getFullYear() + '-' + ((this.nowDate.getMonth() + 1) < 10 ? '0' + (this.nowDate.getMonth() + 1) : (this.nowDate.getMonth() + 1)) + '-' + (this.nowDate.getDate() < 10 ? '0' + this.nowDate.getDate() : this.nowDate.getDate())
      } else {
        this.nowDate = new Date(new Date((this.nowDate.getFullYear()) + '/' + (this.nowDate.getMonth() + 1) + '/' + this.nowDate.getDate()).getTime() + 1000 * 24 * 3600 * 1);
        self.today = this.nowDate.getFullYear() + '-' + ((this.nowDate.getMonth() + 1) < 10 ? '0' + (this.nowDate.getMonth() + 1) : (this.nowDate.getMonth() + 1)) + '-' + (this.nowDate.getDate() < 10 ? '0' + this.nowDate.getDate() : this.nowDate.getDate())
      }
      this.getData()
    },
    getday: function (date) {
      switch (date) {
        case 0:
          return '周日';
          break;
        case 1:
          return '周一';
          break;
        case 2:
          return '周二';
          break;
        case 3:
          return '周三';
          break;
        case 4:
          return '周四';
          break;
        case 5:
          return '周五';
          break;
        case 6:
          return '周六';
          break;
      }
    }
  },
  computed: mapState(['loginData', 'flights', 'addValue'])
}
</script>
<style lang="stylus" scoped>
@import '../../stylus/base.styl';
@import '../../../static/zyh.styl';
.padding-css3
  padding: f_times(0.5);
.daysdiv2
  border-radius: f_times(1.6);
  color: white;
  background-color: #843D99;
  margin: 0 f_times(0.8);
  padding: f_times(0.4);
.img1
  width: 1.6rem;
.fontWei
  font-weight: 600 !important;
.padding-css2
  padding: 0 f_times(0.8);
.bg-F2
  background-color: #F2F2F2;
.todaylist div
  height: f_times(3);
.jrdiv
  width: 25%;
.border-botttom
  border-bottom: 2px solid #EEEEEE;
.padding-css6
  padding: f_times(0.8) 0;
.DateMoney
  margin-top: f_times(0.2);
.margin-css2
  margin-bottem: f_times(0.7) 0;
common.css:1, .ub-fh
  width: 100%;
.img012
  width: f_times(0.84);
.moneyColor
  color: #FF9D01;
.roundLeft
  left: f_times(-0.84);
.roundRight
  right: f_times(-0.84);
.divisionDashed
  height: 1px;
  border-bottom: 1px dashed #DDD;
.round
  position: absolute;
  background: #DDD;
  width: f_times(0.35);
  height: f_times(0.35);
  border-radius: 50%;
  top: f_times(-0.14);
.img2
  width: f_times(1);
  height: f_times(1);
.zt-999
  color: #999;
.f12
  font-size: f_times(0.8);
.f16
  font-size: f_times(1);
.mart05
  margin-top: f_times(0.5);
.border-radiuscss1
  border-radius: f_times(0.4);
.padding-css7
  padding: f_times(0.4) f_times(0.7) f_times(0.7);
.margin-css3
  margin: f_times(0.7) f_times(0.3) f_times(0.7) f_times(0.3);
.f18
  font-size: f_times(1.3);
.margin-l-css2
  margin-left: f_times(0.35);
.img3
  width: f_times(0.84);
.img1
  width: f_times(1.2);
.btn-yd
  color: white;
  width: f_times(4.2);
  height: f_times(1.9);
  margin-top: f_times(1.9);
  border-radius: 0.5rem;
.bg-moneyColor
  background-color: #FF9D01;
.rule
  margin-top: f_times(0.2);
.pop1
  background-color: rgba(0, 0, 0, 0.3);
  padding: f_times(2) f_times(1);
  position: fixed;
  top: f_times(2.5);
  height: 100%;
.popdata
  border-radius: f_times(0.5);
  padding: f_times(1);
  height: 80%;
  overflow-y: scroll;
  font-size: f_times(1.1);
  line-height: f_times(1.1);
.closeIcon
  background-color: #FFF;
  background-image: url('./close_tips.png');
  height: f_times(2);
  width: f_times(2);
  position: absolute;
  right: f_times(0.5);
  z-index: 2;
  top: f_times(1.2);
  border-radius: 50%;
</style>